<template>
    <div class="login" clearfix>
        <div class="login-wrap">
            <el-row type="flex" justify="center">
                <el-form ref="form" :model="LoginForm" status-icon >
                    <el-form-item label="账号">
                        <el-input v-model="LoginForm.username" placeholder="请输入用户名" prefix-icon></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input show-password placeholder="请输入密码" v-model="LoginForm.password"></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-col :span="10"><el-button type="primary"   @click="dologin"                   >登录</el-button></el-col>
                        <el-col :span="10"><el-button type="primary"   @click="doregister">注册</el-button></el-col>
                    </el-form-item>
                </el-form>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
   data(){
       return{
           LoginForm:{
               username:"",
               password:"",
           },


           ////
           path: "ws://0.0.0.0:2346",
           socket: "",
       }
   },
   created() {

       this.dologin();
   },
    methods:{
       doregister(){
           // const that = this;
           // console.log(that.$router);
           this.$router.push('/register');
       },

       dologin(){
           if (!this.LoginForm.username) {
               this.$msg.error("请输入用户名！");
               return;
           } else if (!this.LoginForm.password) {
               this.$msg.error("请输入密码！");
               return;
           } else{
               this.login();
           }
       },
       login(){
           console.log(this.$API.http);
           /// 登陆成功   提示消息，message组件
           this.$ajax.post(this.$API.http+"/api/login/login", this.LoginForm).then(res=> {
                   if(res.data.code == 1){
                       this.$msg.success(res.data.msg)
                       //，存入session
                       window.sessionStorage.setItem('token', res.data.token);
                       window.sessionStorage.setItem('username', res.data.username);
                       window.sessionStorage.setItem('nickname', res.data.nickname);
                       window.sessionStorage.setItem('userid', res.data.userid);
                       window.sessionStorage.setItem('userimg', res.data.img);
                       //跳转
                       if(res.data.role == 1){
                           this.$router.push('/admin');
                       }
                       else if(res.data.role == 2){
                           this.$router.push('/sellHome');
                       }
                       else if(res.data.role == 3){
                           this.$router.push('/userHome');
                       }


                   }else {
                       this.$msg.error(res.data.msg)
                   }
               },
               error => {
                   //请求后更新List的数据
                   window.alert(error);
               }
           )
       },

       /////////////
        // socket连接成功
        init() {
            if (typeof WebSocket === "undefined") {
                alert("您的浏览器不支持socket");
            } else {
                // 实例化socket
                this.socket = new WebSocket(this.path);
                // 监听socket连接
                this.socket.onopen = this.open;
                // 监听socket错误信息
                this.socket.onerror = this.error;
                // 监听socket消息
                this.socket.onmessage = this.getMessage;
            }
        },

        open() {
            console.log("socket连接成功");
        },
// socket连接失败
        error() {
            console.log("连接错误");
        },
// 接收消息
        getMessage(msg) {
            console.log("==websocket接收数据==");
            console.log(msg.data);
        },
// 发送数据
        send() {
            this.socket.send("这是传送数据");
        },
// 关闭socket
        close() {
            console.log("socket已经关闭");
        }
    },
    mounted() {
        // 初始化
        this.init();
    },
    destroyed() {
        // 销毁监听
        this.socket.onclose = this.close;
    }
}
</script>

<style scoped>
.login {
    width: 100%;
    height: 100%;
    background: url("../assets/images/bg1.jpg") no-repeat;
    /*background-attachment:fixed;*/
    background-size: cover;
    overflow: hidden;
    position:relative;
}
.login-wrap {
    background-size: cover;
    position: absolute;
    overflow: hidden;
    background: url("../assets/images/bg2.jpg") no-repeat;
    opacity: 0.9;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    line-height: 40px;
    padding: 0px  60px;
}
.el-button {
    width: 80%;
}
</style>
